<template>
  <div class="login-container">
    <el-form
      autocomplete="on"
      :rules="loginRules"
      :model="from"
      ref="from"
      label-position="left"
      label-width="0px"
      class="card-box login-form"
    >
      <!-- class="card-box login-form" -->
      <h3 class="title">服装管理系统</h3>
      <div style="margin:0px 0px 20px 10px">
        <el-radio-group v-model="radio" @change="change">
          <el-radio label="1" border>登录</el-radio>
          <el-radio label="2" border>注册</el-radio>
        </el-radio-group>
      </div>
      <div v-if="radio==1">
        <el-form-item prop="gonghao">
          <span style="color:#B0C4DE">工号：</span>
          <el-input v-model="from.gonghao" autocomplete="on" />
        </el-form-item>
        <el-form-item prop="password">
          <span style="color:#B0C4DE">密码：</span>
          <el-input
            type="password"
            @keyup.enter.native="handleLogin"
            v-model="from.password"
            autocomplete="on"
          ></el-input>
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item>
          <span style="color:#B0C4DE;float:left;margin-left:10px;line-height:47px">身份：</span>
          <el-select v-model="from.idactor" placeholder style="width:340px">
            <el-option label="收银员" value="1" style="margin:0px"></el-option>
            <el-option label="销售经理" value="2" style="margin:0px"></el-option>
            <el-option label="仓库管理员" value="3" style="margin:0px"></el-option>
            <el-option label="系统管理员" value="4" style="margin:0px"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="color:#B0C4DE">姓名：</span>
          <el-input v-model="from.user_name" autocomplete="on" />
        </el-form-item>
        <el-form-item>
          <span style="color:#B0C4DE;float:left;margin-left:10px">性别：</span>
          <el-select v-model="from.sex" placeholder style="width:340px">
            <el-option label="男" value="男" style="margin:0px"></el-option>
            <el-option label="女" value="女" style="margin:0px"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="color:#B0C4DE">工号：</span>
          <el-input v-model="from.gonghao2" autocomplete="on" />
        </el-form-item>
        <el-form-item>
          <span style="color:#B0C4DE">号码：</span>
          <el-input v-model="from.phone" autocomplete="on" />
        </el-form-item>
        <!-- <el-form-item style="margin-right:0px">
          <span style="color:#B0C4DE">手机号码：</span>
          <el-input v-model="from.phone" autocomplete="on" style="300px" />
        </el-form-item>-->
        <el-form-item>
          <span style="color:#B0C4DE">密码：</span>
          <el-input v-model="from.password2" autocomplete="on" />
        </el-form-item>
      </div>
      <el-form-item>
        <el-button
          type="primary"
          style="width:100%;"
          :loading="loading"
          @click.native.prevent="handleLogin"
        >{{radio==2?"注册":"登录"}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import store from "../store";

export default {
  name: "login",
  data() {
    return {
      from: {
        gonghao: "",
        password: "",
        idactor: "",
        user_name: "",
        sex: "",
        gonghao2: "",
        phone: "",
        password2: ""
      },
      loginRules1: {
        gonghao: [{ required: true, trigger: "blur", message: "请输入用户名" }],
        password: [{ required: true, trigger: "blur", message: "请输入密码" }]
      },
      loginRules: {},
      loading: false,
      radio: "1"
    };
  },
  created() {
    this.loginRules = this.loginRules1;
  },
  methods: {
    change() {
      if (this.$refs.from) {
        this.$refs.from.clearValidate();
      }
    },
    handleLogin() {
      // this.$refs.loginForm.validate(valid => {
      //   if (valid) {
      //     this.loading = true;
      //     this.$store
      //       .dispatch("Login", this.loginForm)
      //       .then(data => {
      //         this.loading = false;
      //         if ("success" === data.result) {
      //           this.$router.push({ path: "/" });
      //         } else {
      //           this.$message.error("账号/密码错误");
      //         }
      //       })
      //       .catch(() => {
      //         this.loading = false;
      //       });
      //   } else {
      //     return false;
      //   }
      // });
      this.$refs.from.validate(valid => {
        if (valid && this.radio == "1") {
          this.$store
            .dispatch("login", {
              gonghao: this.from.gonghao,
              password: this.from.password
            })
            .then(
              res => {
                // console.log(store.state.userName);
                if (store.state.userName) {
                  this.$router.push({ path: "/main" });
                }
                // else {
                //   console.log(2333);
                //   this.$message.error("账号/密码错误");
                // }
              },
              err => {
                this.$message.error("账号/密码错误");
              }
            );

          // if (store.state.userName) {
          //   this.$router.push({ path: "/main" });
          // } else {
          //   this.$message.error("账号/密码错误");
          // }
          // this.$axios({
          //   url: "/login",
          //   method: "post",
          //   params: { gonghao: this.from.gonghao, password: this.from.password }
          // })
          //   .then(res => {
          //     console.log(res);
          //     this.loading = false;

          // if (res.data.code == 0) {
          //   this.$router.push({ path: "/main" });
          // } else {
          //   this.$message.error("账号/密码错误");
          // }
          // })
          // .catch(() => {
          //   this.loading = false;
          // });
        }
        if (this.radio == 2) {
          console.log("11");
          let obj = {
            user: {
              idactor: this.from.idactor,
              userName: this.from.user_name,
              sex: this.from.sex,
              gonghao: this.from.gonghao2,
              password: this.from.password2,
              phone: this.from.phone
            }
          };
          // console.log(obj);
          this.$axios({
            url: "/User/insertUser",
            method: "post",
            data: JSON.stringify(obj),
            headers: { "content-type": "application/json" }
          })
            .then(res => {
              console.log(res);
              this.loading = false;
              this.$message({
                message: res.data.msg
              });
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
@import "../styles/mixin.scss";
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  @include relative;
  height: 150vh;
  background-color: $bg;
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
    -webkit-text-fill-color: #fff !important;
  }
  input {
    background: transparent;
    border: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    padding: 12px 5px 12px 15px;
    color: $light_gray;
    height: 47px;
  }
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
    &_login {
      font-size: 20px;
    }
  }
  .title {
    font-size: 26px;
    color: $light_gray;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
  }
  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 35px 35px 15px 35px;
    margin: 120px auto;
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
  }
  .thirdparty-button {
    position: absolute;
    right: 35px;
    bottom: 28px;
  }
}
</style>
